<template>
	<view class="container">
		<view class="cut"></view>
		<view class="bank" @tap="showBankList">
			<text>提现至:</text>
			<view class="bankNum">
				<text class="bankName">{{bankName?bankName:''}}</text>
				<text class="bankCode">{{bankCode?bankCode:''}}</text>
			</view>
			<text class="cell-more yticon icon-you"></text>
		</view>
		<view class="cut"></view>
		<view class="cell">
			<view class="title">
				<text>提现{{shellData.name?shellData.name:''}}</text>
				<text>当前可提现{{shellData.name?shellData.name:''}}</text>
				<image src="../../../static/images/public/shellIcon.png" mode=""></image>
				<text>{{cash?cash:''}}</text>
			</view>
			<image @tap.stop="markTips" class="mark-img" src="/static/images/center/icon/5.png" mode=""></image>
			<view class="inputGroup">
				<input type="digit" placeholder="请输入提现贝壳数" placeholder-style="font-weight:normal;font-size: 32rpx;" v-model="count"/>
				<view class="all" @tap="all">全部提现</view>
			</view>
			<view class="surplus">
				<text>提现成功后还剩余</text>
				<image src="../../../static/images/public/shellIcon.png" mode=""></image>
				<text>{{surplus}}</text>
			</view>
		</view>
		<view class="cut"></view>
		<view class="cell">
			<view class="title">
				<text>预计到账金额</text>
			</view>
			<view class="inputGroup">
				<input type="text" disabled="true" placeholder-style="font-weight:normal;font-size: 32rpx;" v-model="predict"/>
			</view>
			<view class="surplus">
				<text>{{count?extractFee:''}}</text>
			</view>
		</view>
		<view class="cut"></view>
		<view class="rule">
			<image @tap="ruleCheck" v-if="ruleChecked" src="../../../static/images/public/select.png" mode=""></image>
			<view @tap="ruleCheck" class="gray" v-else></view>
			<view class="text"><text>同意</text><text @tap="goRule(14,'免责协议')">《免责协议》</text></view>
		</view>
		<view class="loginBtn" @tap="act&&keyboradShown()" :class="act? 'active' : ''">
			提 现
		</view>

		<!-- 银行选择弹层 -->
		<uni-popup ref="popup" type="center">
			<view class="sellerType">
				<image @tap="close" class="close" src="../../../static/images/center/close.png" mode=""></image>
				<text class="title">
					选择到账银行卡
				</text>
				<radio-group @change="radioChange">
					<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in bankList" :key="index">
						<view>
							<text>{{item.bank_name}}</text>
							<text>(尾号{{item.bank_number.substring(item.bank_number.length - 4)}})</text>
						</view>
						<view>
							<radio :value="item.id" :checked="index === current" />
						</view>
					</label>
				</radio-group>
				<view class="addCard" @tap="addCard">
					<text>添加银行卡</text>
					<text class="cell-more yticon icon-you"></text>
				</view>
			</view>
		</uni-popup>
		<newModel ref="newModel" :content="content" confirmText="我知道了"></newModel>
		<passkeyborad :show="keyboradShow" @close="keyboradClose" @finish="finished"></passkeyborad>
	</view>
</template>

<script>
	import {
		bankList,
		checkPassword
	} from "@/api/user.js"
	import {
		shellCash,
		shellList
	} from "@/api/shell.js"
	import utils from '@/common/utils.js'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import passkeyborad from '@/components/yzc-paykeyboard/yzc-paykeyboard.vue'
	import newModel from '@/components/new_model/new_model.vue'
	export default {
		components: {
			uniPopup,
			passkeyborad,
			newModel
		},
		data() {
			return {
				ruleChecked: true,
				extractFee: '',
				shellId: null,
				bankName: '',
				bankCode: '',
				bankId: '',
				bankList: [],
				current: 0,
				surplus: 0,
				count: null,
				cash: null,
				predict: 0,
				act: false,
				shellData: {},
				keyboradShow: false,
				rate:0,
				withdrawal_rule: {}, //提现手续费规则
				content: [],
			}
		},
		onLoad(options) {
			this.shellId = options.id
			uni.showLoading({
				mask:true
			})
			shellList({
				shell_id:this.shellId
			}).then(res => {
				this.shellData = res.data.shell_list[0]
				this.withdrawal_rule = res.data.withdrawal_rule
				this.content = [
					'普惠生活贝壳提现规则：',
					'1. 针对用户或商户贝壳提现，提现至对私银行账户的贝壳转换可提现金额在' + this.withdrawal_rule.money + '元及以下自动审核、单笔' + this.withdrawal_rule.private_service_fee + '元手续费、自动到账 ，' + this.withdrawal_rule.money + '元以上需人工审核、免手续费；',
					'2. 针对用户或商户余额提现，提现至对公银行账户的贝壳转换可提现金额需人工审核、单笔' + this.withdrawal_rule.public_service_fee + '元手续费。'
				]
				uni.setNavigationBarTitle({
					title: this.shellData.name + "提现"
				})
				if (this.shellData.id == 1) {
					this.cash = this.shellData.count
				} else {
					this.cash = String(this.shellData.available_count)
				}
				this.surplus = this.cash
				this.rate = this.shellData.rate
				uni.hideLoading()
			})
		},
		onShow() {
			
			this.getBankList()
		},
		watch: {
			count: {
				deep: true,
				handler(val, oldval) {
					this.blur();
				}
			}
		},
		methods: {
			markTips() {
				this.$refs.newModel.show()
			},
			ruleCheck() {
				this.ruleChecked = !this.ruleChecked
			},
			goRule(id, name) {
				uni.navigateTo({
					url: `/pages/center/help/rulesDetail?id=${id}&tit=${name}`
				})
			},
			getBankList() {
				bankList().then(res => {
					this.bankList = res.data
					this.showBank(0)
				})
			},
			showBank(idx) {
				this.bankNum = this.bankList[idx].id
				this.bankName = this.bankList[idx].bank_name
				this.bankCode = "(尾号" + this.bankList[idx].bank_number.substring(this.bankList[idx].bank_number.length - 4) + ")"
			},
			blur() {
				this.$nextTick(function(){
					this.count = utils.verifyNum(this.count)
					if (Number(this.count) > Number(this.cash)) {
						this.count = this.cash
					}
					let withdrawCash = Number(this.count)*Number(this.rate)
					this.surplus = String((Number(this.cash) - Number(this.count)).toFixed(2))
					if (withdrawCash <= Number(this.withdrawal_rule.private_service_fee)) {
						this.extractFee = "提现金额低于手续费"
						this.predict = 0
					} else if (this.withdrawal_rule.private_service_fee < withdrawCash&& withdrawCash<= this.withdrawal_rule.money) {
						this.extractFee = "提现手续费" + this.withdrawal_rule.private_service_fee + "元"
						this.predict = (withdrawCash - Number(this.withdrawal_rule.private_service_fee)).toFixed(2)
						this.act = true
					} else {
						this.predict = withdrawCash.toFixed(2)
						this.extractFee = "免手续费"
						this.act = true
					}
				})
			},
			all() {
				this.count = this.cash
			},
			showBankList() {
				this.$refs.popup.open()
			},
			radioChange(evt) {
				for (let i = 0; i < this.bankList.length; i++) {
					if (this.bankList[i].bank_number == evt.target.value) {
						this.current = i;
						this.bankId = evt.target.value
						this.bankName = this.bankList[i].bank_name
						this.bankCode = "(尾号" + this.bankList[i].bank_number.substring(this.bankList[i].bank_number.length - 4) + ")"
					}
				}
				this.$refs.popup.close()
			},
			addCard() {
				uni.navigateTo({
					url: '/pages/center/accountSet/bank/addBank?backurl=' + '/pages/center/balance/balanceWithdraw'
				})
			},
			keyboradShown() {
				if(!this.ruleChecked) {
					return uni.showModal({
						content:"请同意《免责协议》",
						confirmColor:"#57BE6A",
						showCancel:false,
						success() {
							
						}
					})
				}
				if (Number(this.count) == 0) {
					return uni.showToast({
						title: '请输入大于0的贝壳数',
						icon: 'none',
						duration: 1000
					})
				}
				let _this = this
				uni.showModal({
					content:"提现" + this.count + this.shellData.name,
					confirmColor:"#57BE6A",
					success(res) {
						if (res.confirm) {
							_this.keyboradShow = true
						}
					}
				})
				
			},
			finished(password) {
				checkPassword({
					password: password
				}, this.keyboradClose()).then(res => {
					this.withdraw()
				})
			},
			withdraw() {
				uni.showLoading({
					mask:true
				})
				shellCash({
					bank_id: this.bankNum,
					number: this.count,
					shell_id: this.shellId
				}).then(res => {
					uni.hideLoading()
					let info = uni.getStorageSync("userInfo")
					info.now_money = String((parseInt(info.now_money) - parseInt(this.count)).toFixed(2))
					uni.setStorageSync("userInfo", info)
					let bank = this.bankName + this.bankCode
					uni.redirectTo({
						url: "/pages/center/balance/withdrawSuccess?bank=" + bank + "&money=" + this.predict
					})
				})
			},

			close() {
				this.$refs.popup.close()
			},
			keyboradClose() {
				this.keyboradShow = false
			}
		},
		onHide() {
			this.$refs.popup.close()
		}
	};
</script>

<style lang="scss" scoped>
	.cut {
		width: 750rpx;
		height: 24rpx;
		background: rgba(238, 238, 238, 1);
	}

	.bank {
		width: 690rpx;
		height: 130rpx;
		padding: 0 30rpx;
		align-items: center;
		display: flex;
		position: relative;

		text:nth-of-type(1) {
			font-size: 28rpx;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
			margin-right: 6rpx;
		}

		.bankNum {
			display: flex;

			.bankName {
				font-size: 26rpx;
				font-weight: bold;
				color: rgba(51, 51, 51, 1);
			}

			.bankCode {
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(153, 153, 153, 1);
			}
		}

		.cell-more {
			position: absolute;
			right: 30rpx;
			color: #E5E5E5;
		}
	}

	.cell {
		width: 690rpx;
		height: 283rpx;
		padding: 0 30rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: rgba(153, 153, 153, 1);
		position: relative;

		.title {
			display: flex;
			align-items: flex-end;
			padding: 40rpx 0 10rpx;

			text:nth-of-type(1) {
				font-size: 28rpx;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
				margin-right: 20rpx;
			}

			image {
				margin: 0 10rpx;
				padding-bottom: 4rpx;
				width: 30rpx;
				height: 20rpx;
			}
		}
		.mark-img{
			position: absolute;
			top: 40rpx;
			right: 30rpx;
			width: 40rpx;
			height: 40rpx;
		}

		.inputGroup {
			position: relative;
			color: #333;

			input {
				height: 90rpx;
				line-height: 90rpx;
				font-size: 60rpx;
				font-weight: bold;
				border-bottom: 1rpx solid #eee;
			}

			.all {
				position: absolute;
				right: 0;
				bottom: 20rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(87, 190, 106, 1);
				z-index: 2;
			}

		}

		.surplus {
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			font-size: 20rpx;
			font-weight: 400;
			color: rgba(153, 153, 153, 1);

			image {
				width: 24rpx;
				height: 16rpx;
				margin: 0 10rpx;
			}
		}
	}

	.loginBtn {
		position: fixed;
		bottom: 60rpx;
		left: 75rpx;
		width: 600rpx;
		height: 80rpx;
		border-radius: 40rpx;
		background: rgba(220, 220, 220, 1);
		line-height: 80rpx;
		text-align: center;
		color: #ffffff;
		font-size: 32rpx;
	}


	.active {
		background-color: $theme-color;
	}

	.sellerType {
		width: 542rpx;
		background-color: #fff;
		border-radius: 8rpx;
		padding: 0 30rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 28rpx;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		position: relative;

		.close {
			position: absolute;
			right: 20rpx;
			top: 20rpx;
			width: 24rpx;
			height: 24rpx;
		}

		.title {
			font-size: 34rpx;
			font-weight: bold;
			color: rgba(51, 51, 51, 1);
		}

		.uni-list-cell {
			display: flex;
			justify-content: space-between;
			line-height: 100rpx;
			border-bottom: 1rpx solid #eee;

			view {
				text:nth-of-type(2) {
					color: #999;
					font-size: 24rpx;
					margin-left: 10rpx;
				}
			}
		}

		.uni-list-cell:nth-of-type(1) {
			border-bottom: 1rpx solid #f5f5f5;
		}

		.addCard {
			display: flex;
			justify-content: space-between;

			.cell-more {
				color: #e5e5e5;
			}
		}
	}
	.rule {
		position: fixed;
		bottom: 180rpx;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	
		image {
			margin-right: 14rpx;
			width: 40rpx;
			height: 40rpx;
			border-radius: 20rpx;
		}
	
		.gray {
			margin-right: 14rpx;
			box-sizing: border-box;
			border: 2rpx #999 solid;
			width: 40rpx;
			height: 40rpx;
			border-radius: 20rpx;
		}
	
		.text {
			font-size: 24rpx;
			color: #333;
	
			text:nth-of-type(2) {
				color: $theme-color;
			}
		}
	}
</style>
